<template>
  <div class="">
    <div :id="chartId" class="chart"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {};
  },
  props: ["chartId", "datas"],
  created(){
    this.$nextTick(()=>{
      this.$watch('datas',()=>{
        this.initChart();
      })
    })
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      let myChart = echarts.init(document.getElementById(this.chartId));

      // 绘制图表
      myChart.setOption({
        grid: {
          left: 30,
          right: 30,
          bottom: 30,
          top: 30,
          containLabel: true,
        },

        legend: {
          show: false,
          icon: "rect",
          x: "80%",
          y: 30,
          itemWidth: 13,
          itemHeight: 13,
          textStyle: {
            color: "#fff",
            fontSize: 14,
          },
        },
        xAxis: {
          show: true,
          type: "category",
          data: this.datas.map((item) => {
            return item.name;
          }),
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(255, 255, 255, 0.2)",
              type: "solid",
            },
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            color: "#FFF",
            fontSize: 14,
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: [
          {
            type: "value",
            axisLabel: {
              show: true,
              margin: 10, //右侧y轴数字的外边距
              textStyle: {
                fontSize: 14,
                color: "rgba(255,255,255,1)",
              },
              formatter: (value) => {
                return value;
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(233, 249, 248, 0.2)",
                type: "dashed",
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(233, 249, 248, 0.2)",
              },
            },
          },
        ],
        series: [
          {
            name: "",
            type: "bar",
            zlevel: 1,
            showBackground: true,
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "#FFFFFF", // 标签字体颜色
                fontSize: 12, // 标签字体大小
              },
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: "RGBA(26, 254, 248, 1)",
                  },
                  {
                    offset: 1,
                    color: "RGBA(39, 255, 175, 1)",
                  },
                ]),
              },
            },
            barWidth: 24,
            data: this.datas,
          },
        ],
      });

      window.onresize = function () {
        // 自适应大小
        myChart.resize();
      };
    },
  },
};
</script>
<style scoped lang="scss">
.chart {
  height: 260px;
}
</style>
